<template>
  <div class="dimission">
    <div class="topheader flex row_bet col_top">
      <div class="header_left">
        <div class="infoli">
          <div class="titles">当前在职人数</div>
          <div class="num">
            <countTo :startVal="startVal" :decimals="0" :endVal="parseFloat(info.num)" :duration="3000">
            </countTo>
          </div>
        </div>
        <div class="infoli">
          <div class="titles">本月入职人数</div>
          <div class="num">
            <countTo :startVal="startVal" :decimals="0" :endVal="parseFloat(info.month_on_num)" :duration="3000">
            </countTo>
          </div>
        </div>
        <div class="infoli">
          <div class="titles">本月离职人数</div>
          <div class="num">
            <countTo :startVal="startVal" :decimals="0" :endVal="parseFloat(info.month_off_num)" :duration="3000">
            </countTo>
          </div>
        </div>
      </div>
      <div class="header_right">
        <div class="flex row_bet col_top">
          <div>近30天人员变动趋势</div>
          <div>
            <a-radio-group style="width:100%" v-model="status" size="small" @change="radiochange">
              <a-radio-button :value="1">
                离职
              </a-radio-button>
              <a-radio-button :value="2">
                入职
              </a-radio-button>
              <a-radio-button :value="3">
                在职
              </a-radio-button>
            </a-radio-group>
          </div>
        </div>
        <div class="chart">
          <v-chart :forceFit="true" :height="height" :data="data" :scale="scale" :padding="[10, 10, 10, 40]">
            <v-tooltip/>
            <v-axis/>
            <v-smooth-line position="time*num" shape="smooth"/>
          </v-chart>
        </div>
      </div>
    </div>
    <div class="tablebox">
      <div class="title">小组详情数据</div>
      <a-table
        :columns="columns"
        :rowKey="dataList => dataList.group+ dataList.month_off_num"
        :dataSource="dataList"
        :loading="loading"
        @change="handleTableChange"
        :pagination="pagination"
      >
      </a-table>
    </div>
  </div>
</template>

<script>
  import countTo from 'vue-count-to'
  import { getQuitTimeData, getMonthUserData } from '@/api/admin/staff'

  export default {
    name: 'Dimission',
    components: {
      countTo
    },
    data () {
      return {
        pagination: {
          pageSize: 15,
          page: 1
        },
        loading: false,
        columns: [
          {
            title: '小组',
            dataIndex: 'group',
            scopedSlots: {
              customRender: 'group  '
            }
          },
          {
            title: '上月入职',
            // width: 150,
            align: 'center',
            dataIndex: 'top_month_on_num',
            scopedSlots: {
              customRender: 'top_month_on_num'
            }
          }, {
            title: '上月离职',
            // width: 150,
            align: 'center',
            dataIndex: 'top_month_off_num',
            scopedSlots: {
              customRender: 'top_month_off_num'
            }
          }, {
            title: '本月入职',
            // width: 150,
            align: 'center',
            dataIndex: 'month_on_num',
            scopedSlots: {
              customRender: 'month_on_num'
            }
          }, {
            title: '本月离职',
            // width: 150,
            align: 'center',
            dataIndex: 'month_off_num',
            scopedSlots: {
              customRender: 'month_off_num'
            }
          }, {
            title: '上月净入职',
            // width: 150,
            align: 'center',
            dataIndex: 'lastnum',
            scopedSlots: {
              customRender: 'lastnum'
            }
          }, {
            title: '本月净入职',
            // width: 150,
            align: 'center',
            dataIndex: 'minthnum',
            scopedSlots: {
              customRender: 'minthnum'
            }
          }
        ],
        dataList: [],
        status: 1,
        startVal: 0,
        info: {
          num: 0, // 当前站点在职人数
          month_on_num: 0, // 本月入职人数
          month_off_num: 0, // 本月离职人数
          group_data: []
        },
        data: [
          // { time: '1991-10-12', num: 3 },
          // { time: '1992-10-13', num: 4 },
          // { time: '1993-10-12', num: 3.5 },
          // { time: '1994-10-12', num: 5 },
          // { time: '1995-10-12', num: 4.9 },
          // { time: '1996-10-12', num: 6 },
          // { time: '1997-10-12', num: 7 },
          // { time: '1998-10-12', num: 9 },
          // { time: '1999-10-12', num: 13 }
        ],
        scale: [{
          dataKey: 'num',
          min: 0
        }, {
          dataKey: 'time'
        }],
        height: 276
      }
    },

    created () {
      this.getQuitTimeData()
      this.getMonthUserData()
    },

    mounted () {

    },

    methods: {
      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        // this.loading = true
        // this.getQuitTimeData(params.page, 15)
      },
      getMonthUserData () {
        getMonthUserData({
          status: this.status
        }).then(res => {
          console.log(res)
          for (let i = 0; i < res.data.length; i++) {
            res.data[i].num = parseInt(res.data[i].num)
          }
          this.data = res.data
        }).catch(err => {
          console.log(err)
        })
      },
      getQuitTimeData () {
        getQuitTimeData().then(res => {
          console.log('数据', res)
          this.info = res.data
          const arr = res.data.group_data
          for (let i = 0; i < arr.length; i++) {
            arr[i].lastnum = arr[i].top_month_on_num - arr[i].top_month_off_num
            arr[i].minthnum = arr[i].month_on_num - arr[i].month_off_num
          }
          this.dataList = arr
          this.loading = false
        }).catch(err => {
          console.log(err)
        })
      },
      radiochange (value) {
        this.status = value.target.value
        // console.log(this.status)
        this.getMonthUserData()
      }
    }
  }
</script>

<style lang='less' scoped>
  .dimission {
    .topheader {
      background-color: #ffffff;
      border-radius: 6px;

      .header_left {
        width: 285px;
        border-right: 1px solid #E9E9E9;

        .infoli {
          padding: 22px 25px;
          border-bottom: 1px solid #E9E9E9;

          .titles {
            color: #96989B;
            font-size: 14px;
          }

          .num {
            color: #101010;
            font-size: 28px;
            font-weight: 600;
          }
        }
      }

      .header_right {
        /*flex: 1;*/
        width: 100%;
        padding: 20px;

        .chart {
          max-width: 1319px;
        }
      }
    }

    .tablebox {
      border: 1px solid rgb(255, 255, 255);
      background-color: #ffffff;
      padding: 12px 17px;
      margin-top: 17px;
      font-weight: 600;

      .title {
        color: #101010;
        font-size: 14px;
        border-radius: 6px;
        margin-bottom: 15px;
      }
    }
  }
</style>
